import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ConfigProvider, theme } from 'antd';
import 'antd/dist/reset.css';
import './App.css';

import Login from './component/Login';
import SystemLayout from './component/Layout';
import Dashboard from './component/Dashboard';
import Users from './component/Users';
import ProtectedRoute from './component/ProtectedRoute';
import { get } from './utils/http';

function App () {
  // 自定义暗色主题配置
  const darkTheme = {
    algorithm: theme.darkAlgorithm,
    token: {
      // 主色调 - 青色系
      colorPrimary: '#00ffff',
      colorInfo: '#00ffff',
      colorSuccess: '#52c41a',
      colorWarning: '#faad14',
      colorError: '#ff4d4f',

      // 背景色
      colorBgContainer: 'rgba(0, 255, 255, 0.02)',
      colorBgElevated: 'rgba(0, 255, 255, 0.05)',
      colorBgLayout: 'rgba(10, 25, 47, 0.95)',

      // 边框和分割线
      colorBorder: 'rgba(0, 255, 255, 0.15)',
      colorBorderSecondary: 'rgba(0, 255, 255, 0.1)',
      colorSplit: 'rgba(0, 255, 255, 0.05)',

      // 文字颜色
      colorText: 'rgba(255, 255, 255, 0.88)',
      colorTextSecondary: 'rgba(255, 255, 255, 0.65)',
      colorTextTertiary: 'rgba(255, 255, 255, 0.45)',
      colorTextQuaternary: 'rgba(255, 255, 255, 0.25)',

      // 圆角
      borderRadius: 8,
      borderRadiusLG: 12,

      // 阴影
      boxShadow: '0 2px 8px rgba(0, 255, 255, 0.15)',
      boxShadowSecondary: '0 4px 12px rgba(0, 255, 255, 0.15)',
    },
    components: {
      // Table组件自定义
      Table: {
        headerBg: 'rgba(0, 255, 255, 0.05)',
        headerColor: '#ffffff',
        rowHoverBg: 'rgba(0, 255, 255, 0.03)',
        borderColor: 'rgba(0, 255, 255, 0.1)',
      },
      // Input组件自定义
      Input: {
        colorBgContainer: 'rgba(0, 255, 255, 0.05)',
        colorBorder: 'rgba(0, 255, 255, 0.2)',
        colorText: '#ffffff',
        colorTextPlaceholder: 'rgba(255, 255, 255, 0.5)',
      },
      // Select组件自定义
      Select: {
        colorBgContainer: 'rgba(0, 255, 255, 0.05)',
        colorBorder: 'rgba(0, 255, 255, 0.2)',
        colorText: '#ffffff',
        colorTextPlaceholder: 'rgba(255, 255, 255, 0.5)',
        optionSelectedBg: 'rgba(0, 255, 255, 0.1)',
      },
      // Pagination组件自定义
      Pagination: {
        colorText: 'rgba(255, 255, 255, 0.8)',
        colorTextDisabled: 'rgba(255, 255, 255, 0.25)',
      },
      // Breadcrumb组件自定义
      Breadcrumb: {
        colorText: 'rgba(255, 255, 255, 0.7)',
        colorTextDescription: 'rgba(255, 255, 255, 0.5)',
        itemColor: 'rgba(255, 255, 255, 0.7)',
        linkColor: '#00ffff',
        linkHoverColor: '#40e0e0',
        separatorColor: 'rgba(255, 255, 255, 0.4)',
      },
      // Menu组件自定义
      Menu: {
        colorItemText: 'rgba(255, 255, 255, 0.8)',
        colorItemTextSelected: '#00ffff',
        colorItemTextHover: '#00ffff',
        colorItemBg: 'transparent',
        colorItemBgSelected: 'rgba(0, 255, 255, 0.1)',
        colorItemBgHover: 'rgba(0, 255, 255, 0.05)',
      },
      // Card组件自定义
      Card: {
        colorBgContainer: 'rgba(0, 255, 255, 0.02)',
        colorBorderSecondary: 'rgba(0, 255, 255, 0.1)',
      },
    },
  };

  return (
    <ConfigProvider theme={darkTheme}>
      <div className="App">
        <Router>
          <Routes>
            {/* 登录页面 */}
            <Route path="/" element={<Login />} />

            {/* 系统主布局，包含所有受保护的路由 */}
            <Route path="/*" element={
              <ProtectedRoute>
                <SystemLayout />
              </ProtectedRoute>
            }>
              {/* 嵌套路由 */}
              <Route path="dashboard" element={<Dashboard />} />
              <Route path="users" element={<Users />} />
              <Route path="products" element={<div style={{ color: '#ffffff' }}>产品管理页面开发中...</div>} />
              <Route path="reports" element={<div style={{ color: '#ffffff' }}>数据报表页面开发中...</div>} />
              <Route path="reports/sales" element={<div style={{ color: '#ffffff' }}>销售报表页面开发中...</div>} />
              <Route path="reports/user" element={<div style={{ color: '#ffffff' }}>用户报表页面开发中...</div>} />
              <Route path="documents" element={<div style={{ color: '#ffffff' }}>文档管理页面开发中...</div>} />
              <Route path="settings" element={<div style={{ color: '#ffffff' }}>系统设置页面开发中...</div>} />
            </Route>
          </Routes>
        </Router>
      </div>
    </ConfigProvider>
  );
}

// eslint-disable-next-line no-unused-vars
async function getMenu () {
  let res = await get('/api/api/server-cmi-basics/api/listUserInfoAndMenu');
  console.log('getMenu', res);
}

// 可以在需要时调用
// getMenu();

export default App;
